<template>
    <el-button
        size="large"
        type="primary"
        class="w-full"
        :disabled="disabled"
        :loading="createLoading"
        @click="create"
    >
        <div v-if="createLoading">正在请求中</div>
        <div v-else>
            <span class="text-base font-bold">立即生成</span>
            <template v-if="config.free_status">
                (剩余免费{{ config?.surplus_num }}次)
            </template>
            <template v-else>
                <span v-if="config.points === 0" class="text-xs ml-2">(免费)</span>
                <span v-else class="text-xs ml-2">(消耗{{ config.points || '--' }}积分)</span>
            </template>
        </div>
    </el-button>
</template>

<script lang="ts" setup>
import {
    config,
    formData,
    generate,
    createLoading
} from '../hooks/useVideoEffect'

defineProps({
    disabled: {
        type: Boolean,
        default: false
    }
})

const create = () => {
    generate(formData.value)
}
</script>
